<template>
    <div class="loan-after app-container">
        <el-form ref="form" :model="listQuery" label-width="120px">
            <div>
                <el-form-item label="姓名">
                    <el-input @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.mobile"></el-input>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.orderId"></el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item label="逾期开始时间">
                    <el-date-picker @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.createStart"></el-date-picker>
                </el-form-item>
                <el-form-item label="逾期结束时间">
                    <el-date-picker @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.createEnd"></el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width:100%">
            <el-table-column align="center" label="姓名" min-width="90">
                <template slot-scope="scope">
                    <span>张三三{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="手机号" min-width="140">
                <template slot-scope="scope">
                    <span>{{scope.row.mobile}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="订单号" min-width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.mobile}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="借款金额" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.loanAmount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="逾期金额" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.overdue}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="逾期天数" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.overdueDays}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="罚金" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.overdueAmount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.loanAmount}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { fetchList } from "@/api/article";
    import waves from "@/directive/waves"; // 水波纹指令

    export default {
        name: 'borrowManager',
        directives: {
            waves
        },
        data() {
            return {
                tableKey: 0,
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    name: '',
                    mobile: '',
                    orderId: '',
                    createStart: '',
                    createEnd: ''
                }
            }
        },
        created() {
            this.getList()
        },
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'info',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        methods: {
            getList() {
                this.listLoading = true;
                fetchList(this.listQuery).then(response => {
                    this.list = response.data.items;
                    this.total = response.data.total;
                    this.listLoading = false;
                });
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            }
        }
    }
</script>
